<template>
  <div class="my">
    <Header class="my-header">
      <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
      <div v-if="!loginStatus" class="login" @click="goLogin">登录 / 注册</div>
      <div v-else class="userinfo">
        <img :src="userInfo.imgUrl" alt="">
        <h4>{{ userInfo.nickName }}</h4>
      </div>
      <template v-slot:icon-r><i class="iconfont icon-fangzi"></i></template>
    </Header>
    <section>
      <ul>
        <li @click="goPath" class="list">地址管理</li>
        <li v-for="(item,index) of list" :key="index" class="list">{{item}}</li>
        <li v-if="loginStatus" @click="loginOut_" class="list">退出登录</li>
      </ul>
    </section>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant';
export default {
  components: {
    Header
  },
  data() {
    return {
      list:['个人信息','我的收藏','我的拼团','优惠券']
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      loginStatus: state => state.user.loginStatus
    })
  },
  watch: {},
  methods: {
    //跳转登录注册页面
    goLogin() {
      this.$router.push({ name: 'login' })
    },
    ...mapMutations([
      'loginOut'
    ]),
    goBack() {
      this.$router.push({name:'home'})
    },
    //退出登录
    loginOut_() {
      this.loginOut()
      Toast('操作成功')
    },
    //跳转地址管理
    goPath(){
      this.$router.push({name:'path'})
    }
  },
  created() { },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.my {
  height: 100vh;

  .my-header {
    box-sizing: border-box;
    align-items: flex-start;
    padding-top: .4rem;
    height: 4.16rem;
    ::v-deep .icon-fanhui{
      font-size: .56rem;
    }
    .icon-fangzi {
      font-size: .9333rem;
    }
    ::v-deep .icon-r {
      margin-top: -0.1333rem;
    }
    ::v-deep .icon-l {
      padding-left: .08rem;
      width: auto;
    }

    .login {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 2rem);
      color: #fff;
      background-color: rgba(255, 181, 0, 0.9);
      border-radius: .1333rem;
      padding: .1333rem .5333rem;
    }

    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: .5333rem;

      img {
        border-radius: 50%;
        width: 1.8667rem;
      }

      h4 {
        color: #fff;
        margin-top: .2667rem;
      }
    }
  }
  .list{
    padding: .5333rem .8rem ;
    border-bottom: 2px solid #f5f5f5;
  }
}
</style>
